<template>
	<view class="container" :style="{backgroundColor:bgcolor,backgroundImage:bgimg?'url(' + bgimg + ')':'none','background-size': '100%' + bgheight + '%'}">
		<!-- 测试自定义数据 -->

		<view v-if="explain.length>0">
			<view v-for="(item,index) in explain" :key="index">
				<view>
					<!-- 导航栏组件 -->
					<view v-if="item.type == 'info'">
						<uni-nav-bar v-if="item.title" :title="item.title" statusBar :backgroundColor="item.navBackgroundColor||'rgba(0,0,0,0)'"
							:border="false" :color="item.titleColor" :fixed="true"></uni-nav-bar>
								<view v-else style="height: 10px;"></view>
						<!-- 头部背景 -->
						<!-- <view class="headerBgColor" :style="{backgroundColor:item.pageBgColor}"></view> -->
					</view>
					<!-- 轮播图 -->
					<view v-if="item.type == 'banner'">
						<carousel :data="item"></carousel>
					</view>
					<!-- 通告 -->
					<view v-if="item.type == 'notice'">
						<notice :list="item.data" :Dataobj="item"></notice>
					</view>
					<!-- 搜索框 -->
					<view v-if="item.type == 'search'">
						<view class="input-view" @click="goURl(`/pages/index/search`)">
							<view class="input-view-box">
								<text>输入商品名称</text>
							</view>
							<view class="input-view-right">
								<uni-icons style="line-height: 30px;" type="search" size="22" color="#666666" />
							</view>
						</view>
					</view>
					<!-- 功能区 -->
					<view v-if="item.type == 'navigation'">
						<navigation :list="item.data" :type="item.tabType"></navigation>
					</view>
					<!-- 广告 图片 -->
					<view v-if="item.type == 'images'" style="padding: 20upx;">
						<posterbox :type="item.tabType" :list="item.data"></posterbox>
					</view>
					<!-- 普通商品列表 -->
					<view v-if="item.type == 'product'">
						<GoodsList ref="goodList" :goodData="item" :type="item.tabType" style="padding: 0 10upx;"></GoodsList>
					</view>
					<!-- 砍价 -->
					<view v-if="item.type == 'kanjia'">
						<bargain></bargain>
					</view>
					<!-- 秒杀商品列表 -->
					<view v-if="item.type == 'miaosha'">
						<KillGoodsList :list="data.list"></KillGoodsList>
					</view>
					<!-- 拼团 -->
					<view v-if="item.type == 'pintuan'">
						<pintuan></pintuan>
					</view>
					<!-- 辅助分割 -->
					<view v-if="item.type == 'division'">
						<division :type="item.tabType" :obj="item"></division>
					</view>
					<!-- 宣传标题 -->
					<view v-if="item.type == 'propagate'">
						<propagate :type="item.tabType" :obj="item"></propagate>
					</view>
					<!-- 视频 -->
					<view v-if="item.type == 'videoDemo'&& popUpWindow ">
						<videoDemo :type="item.tabType" :obj="item"></videoDemo>
					</view>
				</view>
			</view>
		</view>
	
		<view class="popUpWindow" v-if="!popUpWindow && explain[0].popUpWindow">
			<view class="box">
				<uni-icons type="closeempty" class="closeempty" color="#fff" size="30" @click="setPopUpWindow"></uni-icons>
				<image :src="explain[0].popUpWindow" mode="widthFix"></image>
			</view>
		</view>
		<uni-popup ref="share">
			<view class="sharebox">
				<image class="guang" src="https://pili-vod.guanxikeji.com/houdejia/img/1711595693946.png" mode=""></image>
				<view class="head">
					<image :src="goodbargaining.user.head||$defaultAvatar" mode=""></image>
				</view>
				<view class="user">
					好友 <text>{{goodbargaining.user.nickname||setId(goodbargaining.user.mobile)}}</text> 的助力邀请
				</view>
				<view class="title">
					朋友,我发现<text>一件好货</text>
				</view>
				<view class="titles">
					快来帮我砍一刀吧~
				</view>
				<view class="goods">
					<image :src="goodbargaining.goods.img" mode=""></image>
					<view class="textsl1 goodstitle">{{goodbargaining.goods.name}}</view>
				</view>
				<view class="btns" @click="goURle('/pages/commodity/bargaining/bargaining?id='+goodbargaining.ID)">
					帮忙砍一刀
				</view>
				<view class="close" @click="share.close()">
					<uni-icons type="closeempty" color="#999" size="25"></uni-icons>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="sharese">
			<view class="sharebox">
				<image class="guang" src="https://pili-vod.guanxikeji.com/houdejia/img/1711595693946.png" mode=""></image>
				<view class="head">
					<image :src="goodListse.head||$defaultAvatar" mode=""></image>
				</view>
				<view class="user">
					好友 <text>{{goodListse.nickname||setId(goodListse.mobile)}}</text> 的助力邀请
				</view>
				<view class="title">
					朋友,我发现<text>一件好货</text>
				</view>
				<view class="titles">
					快来拼团吧~
				</view>
				<view class="goods">
					<image :src="goodList.goods.img" mode=""></image>
					<view class="textsl1 goodstitle">{{goodList.goods.name}}</view>
				</view>
				<view class="btns" @click="goURlee(goodList)">
					去拼团！
				</view>
				<view class="close" @click="sharese.close()">
					<uni-icons type="closeempty" color="#999" size="25"></uni-icons>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	// 秒杀
	import KillGoodsList from "@/components/home/goods/killGoodsList.vue"
	//商品列表
	import carousel from "@/components/home/carousel/carousel.vue"
	//轮播图
	import GoodsList from "@/components/home/goods/goodsList.vue"
	// 砍价
	import bargain from "@/components/home/bargain/bargain.vue"
	//图片
	import posterbox from "@/components/home/image/poster.vue"
	//导航
	import navigation from "@/components/home/navigation/navigation.vue"
	// 公告
	import notice from "@/components/home/notice/notice.vue"
	// 公告
	import pintuan from "@/components/home/pintuan/pintuan.vue"	
	//辅助分割
	import division from "@/components/home/division/division.vue"
	//宣传标题
	import propagate from "@/components/home/propagate/propagate.vue"
	//视频
	import videoDemo from "@/components/home/videoDemo/videoDemo.vue"

	import {
		onLoad,
		onShow,
		onPullDownRefresh,
		onReachBottom
	} from "@dcloudio/uni-app";
	import {
		ref,
		reactive,
		getCurrentInstance,
		watch
	} from "vue";
	const {
		proxy
	} = getCurrentInstance();
	const explain = ref([{
		popUpWindow: false
	}]) //页面所有数据
	const bgcolor = ref() //页面背景颜色
	const bgimg = ref() //页面背景
	const bgheight = ref() //页面背景daxiao
	const data = reactive({
		page: 0,
		size: 20,
		pages: 1,
		navBarTitle: "这是一个导航",
		pageBgColor: "#00c356",
		// 轮播数据
		swiperList: [{
			colorClass: 'uni-bg-red',
			url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
			content: '内容 A'
		}, {
			colorClass: 'uni-bg-green',
			url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
			content: '内容 B'
		}, {
			colorClass: 'uni-bg-blue',
			url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
			content: '内容 C'
		}],
		// 指示点数据
		dotStyle: {
			backgroundColor: 'rgba(0, 0, 0, .3)',
			border: '1px rgba(0, 0, 0, .3) solid',
			color: '#fff',
			selectedBackgroundColor: 'rgba(0, 0, 0, .9)',
			selectedBorder: '1px rgba(0, 0, 0, .9) solid'
		},
		current: 0,
		mode: 'round',
		swiperDotIndex: 0,


		kjlist: [],

	})
	let popUpWindow = ref(false)
	let share = ref()
	let sharese = ref()
	let goodbargaining = ref({
		user: {
			head: 'https://pili-vod.guanxikeji.com/template/img/1709602500291.png',
			nickname: '测试',
			mobile: '13048448888',
		},
		goods: {
			img: 'https://pili-vod.guanxikeji.com/template/img/1709602500291.png',
			name: '测试',
		},
		ID: 0
	})
	let goodList = ref({
		goods: {
			img: 'https://pili-vod.guanxikeji.com/template/img/1709602500291.png',
			name: '测试',
		}
	})
	let goodListse = ref({
		head: 'https://pili-vod.guanxikeji.com/template/img/1709602500291.png',
		nickname: 'https://pili-vod.guanxikeji.com/template/img/1709602500291.png',
		mobile: '13048448888',
	})
	let arrse = ref([])
	onLoad((option) => {
	})
	onShow(() => {
		try {
			popUpWindow.value = uni.getStorageSync("popUpWindow")
		} catch (e) {
			popUpWindow.value = false
		}
		uni.getClipboardData({
			success: function(res) {
				uni.hideLoading()
				if (res.data.indexOf('砍价') != -1) {
					let str = res.data.substring(res.data.length - (res.data.length - 29))
					bargaining(str.slice(1, str.length - 2))
				} else if (res.data.indexOf('拼团') != -1) {
					let str = res.data.substring(res.data.length - (res.data.length - 29))
					bargainingse(str.slice(1, str.length - 2))
				}
			}
		});
		data.page = 0
		data.pages = 1
		data.goodlistData = []
		setTimeout(() => {
				getIndex()
		},1000)
	})
	onPullDownRefresh(() => {
		data.page = 0
		data.pages = 1
		data.goodlistData = []
		
		getIndex()
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 1000);
	})
	onReachBottom(() => {
		
	})

	function bargainingse(id) {
		proxy.$request({
			url: `api/teamwork/joiningGroups/${id}/`,
			method: 'post',
			success(res) {
				if (res.errno == 0) {
					let userlist = res.data.userList
					userlist.forEach((items) => {
						if (items.mobile == uni.getStorageSync('userInfo').mobile) {
							arrse.value.push(items)
						}
					})
					if (arrse.value.length == 0) {
						goodList.value = res.data.data
						goodListse.value = res.data.userList[0]
						sharese.value.open()
					} else {
						uni.showToast({
							icon: 'none',
							title: '参加过了哦！'
						})
					}
				}
			}
		})
	}

	function setId(id) { //截取后4位
		try {
			return id.substring(id.length - 4)
		} catch (e) {
			return '****'
		}
	}

	function goURlee(item) {
		uni.navigateTo({
			url: '/pages/commodity/bargaining/myGroupBuyinglist/createorderGroupCY'
		})
		share.value.close()
		uni.setStorageSync('goodlist', item)
		uni.setClipboardData({
			data: '',
			success: function() {
			}
		});
	}
	function goURle(urls){
		uni.navigateTo({
			url:urls
		})
		share.value.close()
		uni.setClipboardData({
			data: '',
			success: function () {
			}
		});
	}
	function bargaining(id) {
		proxy.$request({
			url: `api/bargaining/bargainingList/`,
			method: 'post',
			data: {
				id: Number(id)
			},
			success(res) {
				// 我马上就|要砍价成功~求求你帮我~ 复制打开【红色模板】MK3HM
				if (res.errno == 0 && res.data.user.mobile != uni.getStorageSync('userInfo').mobile) {
					goodbargaining.value = res.data
					share.value.open()
				}
			}
		})
	}
	function setPopUpWindow() {
		popUpWindow.value = true
		uni.setStorageSync("popUpWindow", true)
	}
	function shopClassList() {
		proxy.$request({
			url: `api/shopClassList/?page=1&size=999`,
			method: 'get',
			success(res) {}
		})
	}
	//获取首页格式
	function getIndex() {
		proxy.$request({
			url: `api/decoration/`,
			method: 'get',
			success(res) {
				if (res.errno == 0 && res.data.explain != '') {
					explain.value = JSON.parse(res.data.explain)
					explain.value.forEach((it) => {
						if (it.type == 'info') {
							bgcolor.value = it.backgroundColor
							bgimg.value = it.backgroundImage
							bgheight.value = it.height
						}
						if (typeof it.tabType == 'string') {
							it.tabType = parseInt(it.tabType);
						}
					})
			
				} else {
					// uni.showToast({
					// 	icon: 'none',
					// 	title: res.errmsg
					// })
					// explain.value = JSON.parse('[{"type":"info","title":"默认装修","backgroundColor":"#fff","backgroundImage":"","titleColor":"rgba(255, 255, 255, 1)","navBackgroundColor":"rgba(247, 7, 7, 1)","tabType":1},{"type":"banner","data":[{"name":"8600(1).png","url":"https://pili-vod.guanxikeji.com/mb/1721036842104.png","link":"","form":{}},{"name":"4300.png","url":"https://pili-vod.guanxikeji.com/mb/1721036855061.png","link":"","form":{}},{"name":"543541.png","url":"https://pili-vod.guanxikeji.com/mb/1721036860010.png","link":"","form":{}}],"options":{},"tabType":"1","height":""},{"type":"notice","data":[{"title":"重大消息","publisher":"众诚科技","content":"众诚科技","time":"2024-07-02 15:33:06"}],"options":{},"tabType":"2"},{"type":"navigation","data":[{"name":"心灵","url":"https://pili-vod.guanxikeji.com/mb/1721037028228.png","link":"","form":{}},{"name":"世界","url":"https://pili-vod.guanxikeji.com/mb/1721037080938.png","link":"","form":{}},{"name":"环球","url":"https://pili-vod.guanxikeji.com/mb/1721037091037.png","link":"","form":{}},{"name":"房屋","url":"https://pili-vod.guanxikeji.com/mb/1721037100849.png","link":"","form":{}},{"name":"资讯","url":"https://pili-vod.guanxikeji.com/mb/1721037111505.png","link":"","form":{}}],"options":{},"tabType":"3"},{"type":"images","data":[{"name":"7hv74swz@2x.png","url":"https://pili-vod.guanxikeji.com/mb/1721037130676.png","link":"","form":{}}],"options":{},"tabType":1},{"type":"product","data":[],"options":{"originalPrice":true,"goodRatio":true,"volumeStr":true},"tabType":"2","title":"商品"}]')
					
				}
						
			}
		})
	}
</script>

<style lang="scss" scoped>
	.container {
		min-height: calc(100vh - 50px);
		background-size: 100% 100%;
		background-repeat: no-repeat;

		// 头部背景颜色
		.headerBgColor {
			position: absolute;
			left: 0;
			top: 0;
			width: 100vw;
			background-color: #00C356;
			height: 220px;
		}

		// 头部
		.header {
			z-index: 1;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: #00C356;
			padding: 0 30upx;

			.left {
				font-size: 13px;
				font-weight: bold;
				color: #fff;
				z-index: 99;
			}

			.rightSearch {
				width: calc(100% - 160upx);
			}
		}

		uni-swiper {
			height: auto;
		}

		// 轮播
		.swiperdotbox {
			margin: 30upx;

			.swiper-box {
				.swiperImage {
					width: 100%;
					height: 100%;
					border-radius: 30upx;
				}
			}
		}


	}

	.popUpWindow {
		position: fixed;
		width: 100vw;
		height: 100vh;
		z-index: 999;
		top: 0;
		left: 0;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;

		.box {
			width: 80vw;
			position: relative;

			.closeempty {
				// position: absolute;
				// right: 0;
				// top: -20px;
				// z-index: 9999;
				display: flex;
				justify-content: center;
				margin-bottom: 20rpx;
			}

			image {
				width: 100%;
			}
		}
	}

	.sharebox {
		width: 460upx;
		height: 530upx;
		background-image: url('https://pili-vod.guanxikeji.com/houdejia/img/1711591738701.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		padding-top: 60upx;
		position: relative;

		.guang {
			width: 120vw;
			height: 120vw;
			z-index: -1;
			position: fixed;
			left: -10vw;
			top: calc((100vh - 120vw)/2);
			animation: rotate 10s infinite;
		}

		.head {
			width: 120upx;
			height: 120upx;
			background-image: url('https://pili-vod.guanxikeji.com/houdejia/img/1711591850966.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;
			margin: 0 auto;
			text-align: center;

			image {
				background-color: #fff;
				width: 88upx;
				height: 88upx;
				border-radius: 50%;
				margin-top: 13upx;
			}
		}

		.user {
			font-size: 10px;
			text-align: center;
			padding: 5upx;
			border: 1px solid #8E5808;
			color: #8E5808;
			border-radius: 30upx;
			width: 70%;
			margin: 20upx auto;

			text {
				color: #DD0C00;
			}
		}

		.title {
			font-size: 16px;
			margin-top: 10upx;
			font-weight: bold;
			color: #8E5808;
			text-align: center;

			text {
				color: #D72B21;
			}
		}

		.titles {
			margin-top: 10upx;
			font-size: 14px;
			font-weight: bold;
			color: #8E5808;
			text-align: center;
		}

		.goods {
			background-color: #fff;
			height: 100upx;
			margin: 20upx 30upx 20upx 30upx;
			border-radius: 10upx;
			display: flex;
			align-items: center;

			// justify-content: space-between;
			image {
				width: 80upx;
				height: 80upx;
				// background-color: #8E5808;
				border-radius: 10upx;
				margin-left: 10upx;
			}

			.goodstitle {
				max-width: calc(100% - 100upx);
				font-size: 12px;
				color: #333333;
				font-weight: bold;
				margin-left: 10upx;
			}
		}

		.btns {
			box-shadow: 3px 5px 23px 0px rgba(218, 13, 0, 0.5);
			background: linear-gradient(to right, #FF732D, #FF4B2B);
			width: 80%;
			margin: 0 auto;
			border-radius: 40upx;
			text-align: center;
			color: #fff;
			font-size: 14px;
			padding: 8upx 0;
		}

		.close {
			position: absolute;
			width: 80upx;
			height: 80upx;
			background-color: #fff;
			left: calc(50% - 40upx);
			bottom: -120upx;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	.kehu {
		position: fixed;
		right: 2%;
		bottom: 20%;
		z-index: 999;
		background-color: #000;
		opacity: 0.6;
		border-radius: 50%;
		padding-left: 0 !important;
		padding-right: 0 !important;
		line-height: 0 !important;
	}
	// 搜索
	.input-view {
	
		display: flex;
		flex-direction: row;
		// width: 500rpx;
		flex: 1;
		background-color: #f5f5f5;
		justify-content: space-between;
		height: 70upx;
		border-radius: 30px;
		flex-wrap: nowrap;
		margin: $padding;
		line-height:30px;
		overflow: hidden;
	
		.input-view-box {
			display: flex;
	
			text {
				height: 30px;
				line-height: 70upx;
				width: 370rpx;
				padding: 0 0 0 30upx;
				font-size: 16px;
				color: #9f9f9f;
				
			}
		}
	
		.input-view-right {
			// background-color: red;
			border-radius: 30px ;
			padding: 4upx 20upx;
			color: #FA301B;
		}
	}
	@keyframes rotate {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}

	::v-deep .header .uni-swiper__dots-box {
		justify-content: flex-end !important;
		padding-right: 20upx;
	}

	::v-deep .uni-navbar__header-btns-right {
		width: 0 !important;
	}

	::v-deep .uni-navbar__header-btns-left {
		width: 0 !important;
	}

	::v-deep .uni-navbar {
		// background: linear-gradient(to right,#FF7338,#FF201F);
	}

	::v-deep .uni-noticebar {
		margin: 0;
	}
</style>
<style>
	page {
		background-color: #F0F4F9;
		/* filter: grayscale(100%);  */
		/* 如果你想要更平滑的过渡效果，可以添加transition */
		/* transition: filter 0.3s ease-in-out; */
	}
</style>